<template>
  <div>
    <!-- <XtxMessage type="success" text="耶，成功了"></XtxMessage> -->
    <!-- <XtxMessage type='warn' text='警告你'></XtxMessage> -->
    <!-- <XtxMessage type='error' text='错'></XtxMessage> -->
    <div class="box"></div>
    <div class="box1"></div>
    <button @click='open'>调用基于虚拟DOM的函数</button>
    <button @click='start'>开始</button>
    <button @click='pause'>结束</button>
    <h2>{{count}}</h2>
  </div>
</template>

<script>
// 基于虚拟DOM实现函数式调用
import { createVNode, render, onMounted } from 'vue'

// import XtxMessage from '@/components/Message'

import { message } from '@/components/Message/index.js'// index.js和index.vue同时存在,index.vue优先

// import { useIntervalFn } from '@vueuse/core'

import { useCountDown } from '@/hooks'
export default {
  setup () {
    /**
 * 1.createVNode创建虚拟DOM,可以是HTML,也可以是自定义组件.vue
 * 2.真实DOM挂载onMounted之后，调用渲染render函数，传入虚拟DOM和虚拟DOM挂载位置的真实DOM
 */
    onMounted(() => {
    // HTML
      const h1 = createVNode('h1', { class: 'red' }, ['虚拟DOM创建h1'])
      //   console.log(h1)
      render(h1, document.querySelector('.box'))

      /*    // XtxMessage自定义组件
      const Message = createVNode(XtxMessage, { type: 'success', text: '耶，成功了' })
      // console.log(Message)
      render(Message, document.querySelector('.box1'))

      Message.component.setupState.show = true
      setTimeout(() => {
        Message.component.setupState.show = false
      }, 2000) */
    })

    const open = () => {
      message({
        type: 'success',
        text: '耶，成功了',
        time: 5000
      })
    }
    /*
    const count = ref(60)
    const { pause, resume } = useIntervalFn(() => {
      count.value--
      if (count.value <= 0) {
        pause()
      }
    }, 1000, {
      immediate: false// 可以自己控制是否立即倒计时
    }) */

    const { pause, start, count } = useCountDown(60)

    return { open, pause, start, count }
  }
}
</script>

<style lang="scss" scoped>
</style>
